<template>
	<div class="login_container">
		<div class="login_box">
			<!-- 头像区域 -->
			<div class="avatar_box">
				<img src="../src/assets/longmao.jpeg" />
			</div>
			<!-- 表单区域 -->
			<el-form ref="LoginFormRef" :model="LoginForm" :rules='LoginFormRules' class="login_from">
				<!-- 用户 -->
			  <el-form-item prop="account">
			    <el-input v-model="LoginForm.account" prefix-icon="iconfont icon-morentouxiang"></el-input>
			  </el-form-item>
			  <!-- 密码 -->
			  <el-form-item prop="password">
			    <el-input v-model="LoginForm.password" type="password" prefix-icon="iconfont icon-tianchongxing-"></el-input>
			  </el-form-item>
			  <!-- 按钮区域 -->
			  <el-form-item class="btns">
			    <el-button type="primary" @click="login">登陆</el-button>
				<el-button type="info" @click="resetLoginForm">重置</el-button>
			  </el-form-item>
			</el-form>
			
		</div>
	
	</div>
</template>

<script>
	import { formCheck } from '../common/api/data.js'
	export default{
		data(){
			return{
				// 绑定表单元素
				LoginForm:{
					account : 'root',
					password : '123456'
				},
				// 验证表单是否合法
				LoginFormRules:{
					// 验证用户名是否合法
					account:[
						{ required: true, message: '请输入用户名', trigger: 'blur' },
						{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
					],
					// 验证密码是否合法
					password:[
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
					]
				}
			}
		},
		methods:{
			resetLoginForm(){
				this.$refs.LoginFormRef.resetFields()
			},
			login(){
				// 验证表单是否合法
				this.$refs.LoginFormRef.validate( valid => {
					// console.log(this.LoginForm)
					if(!valid) return;
					  formCheck(this.LoginForm).then((res) => {
						console.log(res)
						if(res.code !== 0){
							return this.$message.error("登陆失败")
							
						}else{
							this.$message.success("登陆成功");
							window.localStorage.setItem("token",res.data.token);
							this.$router.push('/home')
						}
					})
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.login_container{
		background-color: #2b4b6b;
		height: 100%;
		.login_box{
			height: 300px;
			width: 450px;
			border-radius: 5px;
			background-color: white;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			.avatar_box{
				height: 130px;
				width: 130px;
				border: 1px solid #eee;
				border-radius: 50%;
				padding: 10px;
				box-shadow: 0 0 10px #ddd;
				position: absolute;
				left: 50%;
				transform: translate(-50%,-50%);
				background-color: #fff;
				img{
					width: 100%;
					height: 100%;
					border-radius: 50%;
					background-color: #eee;
				}
			}
		}
		.login_from{
			position: absolute;
			bottom: 0;
			width: 100%;
			padding: 0 20px;
			box-sizing: border-box;
		}
		.btns{
			display: flex;
			justify-content: flex-end;
		}
	}
</style>
